<script setup>
  import { getUserListApi } from '@/api/user'
  import useTable from '@/hooks/useTable'

  // * 表格相关业务逻辑
  const { tableData, loading, pager, queryForm, getData, pageChange } = useTable({
    apiFn: getUserListApi
  })

  const columnList = [
    { type: 'text', prop: 'nickname', label: '呢称' },
    { type: 'image', prop: 'avatarUrl', label: '头像' },
    { type: 'tag', prop: 'articleQuantity', label: '作品数' },
    { type: 'tag', prop: 'concernQuantity', label: '粉丝数' },
    { type: 'text', prop: 'mobile', label: '手机号' },
    { type: 'text', prop: 'uid', label: 'uid' }
  ]
</script>

<template>
  <div class="user-view content">
    <!-- 搜索区域 -->
    <LvSearch @search="getData">
      <LvSearchItem label="用户名">
        <el-input class="search-input" placeholder="请输入呢称" clearable v-model="queryForm.nickname" />
      </LvSearchItem>
      <LvSearchItem label="手机号">
        <el-input class="search-input" placeholder="请输入手机号" clearable v-model="queryForm.mobile" />
      </LvSearchItem>
    </LvSearch>
    <!-- 表格区域 -->
    <LvTable :data="tableData" :loading="loading" :column-list="columnList" />
    <!-- 分页区域 -->
    <LvPagination :total="pager.total" :page="pager.page" @change="pageChange" />
  </div>
</template>

<style scoped lang="scss"></style>
